<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>account</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">td img {display: block;}</style>
        <script src="GUI/add_on/image_rollover.js" type="text/javascript"></script>
        <link href="GUI/add_on/acct.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            //get userName from session
            var userName="${sessionScope.currentUser}";
            var friends;
            var rank;
            //get user's score from session'
            var userScore="${sessionScope.curScore}";
            var ranking=0;

            //Display profile panel.
            function displayProfile()
            {
                hideFriends();
                hideRank();
                document.getElementById("profile_bg").style.display = 'block';
                document.getElementById("profile_panel").style.display = 'block';
            }
            //Hide profile panel.
            function hideProfile()
            {
                document.getElementById("profile_bg").style.display = 'none';
                document.getElementById("profile_panel").style.display = 'none';
            }
            //display friends panel.
            function displayFriends()
            {
                //reset ranking so you can update rank.
                ranking=0;
                hideProfile();
                hideRank();
                document.getElementById("friends_bg").style.display = 'block';
                document.getElementById("friends_panel").style.display = 'block';
                loadFriends();
                //reload friends list ever so often to keep it updated
                friends = setInterval ( "loadFriends()", 10000 );
            }
            //hide friends panel
            function hideFriends()
            {
                document.getElementById("friends_bg").style.display = 'none';
                document.getElementById("friends_panel").style.display = 'none';
            }
            //display all players panel
            function displayRank()
            {
                hideFriends();
                hideProfile();
                document.getElementById("rank_bg").style.display = 'block';
                document.getElementById("rank_panel").style.display = 'block';
                loadPlayersList();
                //reload player list every so often to keep the list updated
                rank = setInterval ( "loadPlayersList()", 10000 );
            }
            // hide all players panel
            function hideRank()
            {
                document.getElementById("rank_bg").style.display = 'none';
                document.getElementById("rank_panel").style.display = 'none';
            }
            // display picure pop-up panel
            function showPicturePanel()
            {
                document.getElementById("acct_pix_panel").style.display = 'block';
            }
            //close picture pop-up panel
            function hidePicturePanel()
            {
                document.getElementById("acct_pix_panel").style.display = 'none';
            }
            //start update user profiel picture with picutre index from 0 to 11
            function updatePicture(picIndex)
            {
                //Code to update Database goes here.
                updatePictureByUser(userName, picIndex);
                //document.getElementById('acct_player_rank').innerHTML = "Current User: "+userName;
                document.getElementById('acct_player_image').innerHTML = "<img src=GUI/images/account/player_"+picIndex+".png></img>";
                hidePicturePanel();
            }

            //update a profile picutre for a user with given user name.
            function updatePictureByUser(playerName, picIndex)
            {
                var url = "updatePictureServlet?userName=" + playerName + "&picture=" +picIndex;
                if (typeof XMLHttpRequest != "undefined") {
                    req = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                req.open("GET", url, true);
                req.onreadystatechange = updatePicrequestcallback;
                req.send(null);
            }
            //A temp function, do not delete, need it to allow servlet work.
            function updatePicrequestcallback(){}

            //a helper method to prevent friends from repopulating after a search.
            //it also make you have all friends on the table before you search.
            function searchFriendsHelper()
            {
                loadFriends();
                loadFriends();
                searchFriends();
                clearInterval(friends);
            }

            //start to search a friend. We are going back to serlvet incase of chances in the table
            //since last populate firends list
            function searchFriends()
            {
                //get input via textbox.
                var url = "FriendsServlet?userName=" + userName + "&friendName=" + document.getElementById('firends_search').value;
                if (typeof XMLHttpRequest != "undefined") {
                    req = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                req.open("GET", url, true);
                req.onreadystatechange = searchrequestcallback;
                req.send(null);
            }

            function searchrequestcallback() {
                if (req.readyState == 4) {
                    var response = req.responseText.parseJSON();

                    //Access element via id
                    var tempFriendList = document.getElementById("friends_box");

                    existingfriends=response.length;

                    //Basically if you someting returns, then you know you have a friend.
                    //if it returns more than 1 you know something is wrong because each friend name can only be
                    //associated with one person.
                    if (existingfriends==1) {
                        //save searched item
                        var searchedName = response[0]["friendName"]+"friend";
                        var searchedChild = document.getElementById(searchedName);

                        //you want to delete everything first and repopulate friend bo.
                        while (tempFriendList.hasChildNodes())
                            tempFriendList.removeChild(tempFriendList.firstChild);
                        //now you repopulate friend box
                        tempFriendList.appendChild(searchedChild);
                    }
                    else{
                        //tell people there's no such friend
                        document.getElementById("message_window").style.display = 'block';
                        document.getElementById("message").innerHTML = "Sorry you don't have any friend with that name!";
                    }
                }
            }

            //a helper method to prevent players from repopulating after a search.
            //it also make you have all players on the table before you search.
            function searchPlayersHelper()
            {
                loadPlayersList();
                loadPlayersList();
                searchPlayers();
                clearInterval(rank);
            }

            //search a player. We are going back to serlvet incase of chances in the table
            //since last populate players list
            function searchPlayers()
            {
                //get value from text box.
                var url = "PlayersSearchServlet?searchedName=" + document.getElementById('players_search').value;
                if (typeof XMLHttpRequest != "undefined") {
                    req = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                req.open("GET", url, true);
                req.onreadystatechange = searchplayerrequestcallback;
                req.send(null);
            }

            function searchplayerrequestcallback() {
                if (req.readyState == 4) {
                    var response = req.responseText.parseJSON();

                    //need to get element rank box.
                    var tempFriendList = document.getElementById("rank_box");

                    existingfriends=response.length;

                    //the response should be length of 1 if player exists.
                    if (existingfriends==1) {
                        //we want to save the searched item.
                        var searchedName = response[0]["friendName"]+"friend";
                        var searchedChild = document.getElementById(searchedName);
                        //delete everything on the rank box.
                        while (tempFriendList.hasChildNodes())
                            tempFriendList.removeChild(tempFriendList.firstChild);
                        //populate rank box
                        tempFriendList.appendChild(searchedChild);
                    }
                    else{
                        //tell people that the search result is empty.
                        document.getElementById("message_window").style.display = 'block';
                        document.getElementById("message").innerHTML = "Sorry there's no players with that name!";
                    }
                }
            }

            function loadFriends()
            {
                //Goes to servelet and get the clue associated with the level.

                var url = "FriendsServlet?userName=" + userName;
                if (typeof XMLHttpRequest != "undefined") {
                    req = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                req.open("GET", url, true);
                req.onreadystatechange = friendsrequestcallback;
                req.send(null);
            }

            //Getting friends from query respones and render them in to html.
            function friendsrequestcallback() {

                if (req.readyState == 4) {
                    var response = req.responseText.parseJSON();
                    //get friends box element
                    var newFriendsTable = document.getElementById("friends_box");

                    // erase existing friends from frienhds box
                    while (newFriendsTable.hasChildNodes()) {
                        newFriendsTable.removeChild(newFriendsTable.firstChild);
                    }

                    existingfriends=response.length;

                    //dynamically make boxes to populate friends box.
                    for (var i = 0; i < existingfriends; i++) {
                        //create table element
                        var newBlockTable = document.createElement("table");
                        newBlockTable.setAttribute("id", response[i]["friendName"]+"friend");
                        newBlockTable.setAttribute("boarder", "0");
                        newBlockTable.setAttribute("cellpadding", "0");
                        newBlockTable.setAttribute("cellspacing", "0");
                        newBlockTable.setAttribute("width", "293");

                        var newBlockRow = document.createElement("tr");

                        var newBlocktd = document.createElement("td");

                        //create friend frame
                        var newBlockFrame = document.createElement("div");
                        newBlockFrame.setAttribute("id", "friend_frame");
                        newBlockFrame.innerHTML = "<img src=\"GUI/images/account/player_bg.png\" width=\"470\" height=\"40\" />";

                        //create element to hold friend pic.
                        var newBlockPic = document.createElement("div");
                        newBlockPic.setAttribute("id", "friend_pic");
                        newBlockPic.innerHTML =  "<img src=\"GUI/images/account/player_"+response[i]["friendPicture"]+"_small.png\" width=\"23\" height=\"23\" />";

                        //this adds a green box to pic if online.
                        var newBlockOnline = document.createElement("div");
                        newBlockOnline.setAttribute("id", "friend_online");
                        newBlockOnline.setAttribute("style", "display:block");
                        newBlockOnline.innerHTML =  "<img src=\"GUI/images/account/player_pix_online.png\" width=\"23\" height=\"23\" />";

                        //create element for name.
                        var newBlockName = document.createElement("div");
                        newBlockName.setAttribute("class", "acct_window_player_name");
                        newBlockName.setAttribute("id", "player_name");
                        newBlockName.innerHTML = response[i]["friendName"];

                        //all dots elements old graphical dot for UI
                        var newDot1 = document.createElement("div");
                        newDot1.setAttribute("id", "player_dot_1");
                        newDot1.innerHTML = "<img src=\"GUI/images/account/dot.png\"/>";

                        //create lement for rank.
                        var newBlockRank = document.createElement("div");
                        newBlockRank.setAttribute("class", "acct_window_player_data");
                        newBlockRank.setAttribute("id", "friend_rank");
                        //i+1 because rank starts at 1 not 0.
                        if(userScore<response[i]["friendScore"]){
                            newBlockRank.innerHTML = "Rank: " + (i+1);
                        }
                        else if(userScore>=response[i]["friendScore"]){
                            //+2 because we gave the user a rank, which contribute +1 in the rest of friend's rank
                            newBlockRank.innerHTML = "Rank: " + (i+2);
                            //if ranking becomes non 0 once user is a rank
                            if(ranking==0){
                                ranking=(i+1);
                                //gives user a rank.
                                document.getElementById("acct_player_rank").innerHTML = "Rank: " + ranking;
                              
                            }
                        }
                        
                        //all dots elements old graphical dot for UI
                        var newDot2 = document.createElement("div");
                        newDot2.setAttribute("id", "player_dot_2");
                        newDot2.innerHTML = "<img src=\"GUI/images/account/dot.png\"/>";

                        //make element for score.
                        var newBlockScore = document.createElement("div");
                        newBlockScore.setAttribute("class", "acct_window_player_data");
                        newBlockScore.setAttribute("id", "friend_points");
                        newBlockScore.innerHTML = "Score: " + response[i]["friendScore"];

                        //all dots elements old graphical dot for UI
                        var newDot3 = document.createElement("div");
                        newDot3.setAttribute("id", "player_dot_3");
                        newDot3.innerHTML = "<img src=\"GUI/images/account/dot.png\"/>";

                        //make element for level.
                        var newBlockLevel = document.createElement("div");
                        newBlockLevel.setAttribute("class", "acct_window_player_data");
                        newBlockLevel.setAttribute("id", "friend_level");
                        newBlockLevel.innerHTML = "Level: " + response[i]["friendLevel"];

                        //make element for remove button.
                        var newBlockRemoveBt = document.createElement("div");
                        newBlockRemoveBt.setAttribute("id", "btn_remove");
                        //when you click on button it elements friends
                        newBlockRemoveBt.innerHTML = "<a href=\"#\" onclick=deleteFriend(\"" + response[i]["friendName"] + "\") onmouseout=\"MM_swapImgRestore()\" onmouseover=\"MM_swapImage('btn_remove','','GUI/images/account/btn_remove_over.png',1)\"><img src=\"GUI/images/account/btn_remove.png\" name=\"btn_remove\" width=\"15\" height=\"15\" border=\"0\" id=\"btn_remove2\" /></a>";

                        //append green box if player is online.
                        newBlockFrame.appendChild(newBlockPic);
                        if(response[i]["friendOnline"]== "1"){
                            newBlockFrame.appendChild(newBlockOnline);
                        }

                        //append everything.
                        newBlockFrame.appendChild(newBlockName);
                        newBlockFrame.appendChild(newDot1);
                        newBlockFrame.appendChild(newBlockRank);
                        newBlockFrame.appendChild(newDot2);
                        newBlockFrame.appendChild(newBlockScore);
                        newBlockFrame.appendChild(newDot3);
                        newBlockFrame.appendChild(newBlockLevel);
                        newBlockFrame.appendChild(newBlockRemoveBt);
                        newBlocktd.appendChild(newBlockFrame);
                        newBlockRow.appendChild(newBlocktd);
                        newBlockTable.appendChild(newBlockRow);
                        newFriendsTable.appendChild(newBlockTable);

                    }
                }
            }

            //add a friend to a user with given friend name.
            function addFriend(friendName)
            {
                //Goes to servlet to grab players
                var url = "PlayerAddServlet?userName=" + userName + "&friendName=" + friendName;
                if (typeof XMLHttpRequest != "undefined") {
                    req = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                req.open("GET", url, true);
                req.onreadystatechange = addrequestcallback;
                req.send(null);

            }

            //add players. When that's done, reload the list.
            function addrequestcallback() {
                if (req.readyState == 4) {
                    loadPlayersList();
                }
            }


            //delete friends from a user by friend name.
            function deleteFriend(friendName)
            {
                var url = "PlayerDeleteServlet?userName=" + userName + "&friendName=" + friendName;
                if (typeof XMLHttpRequest != "undefined") {
                    req = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                req.open("GET", url, true);
                req.onreadystatechange = deleterequestcallback;
                req.send(null);

            }

            //when delete is done load friends list again.
            function deleterequestcallback() {
                if (req.readyState == 4) {
                    loadFriends();
                }
            }

            //get all players aside from friends and user.
            function loadPlayersList()
            {
                var url = "PlayersSearchServlet?userName=" + userName;
                if (typeof XMLHttpRequest != "undefined") {
                    req = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                req.open("GET", url, true);
                req.onreadystatechange = playerslistrequestcallback;
                req.send(null);
            }

            //get all players from query result and render into html.
            function playerslistrequestcallback() {

                if (req.readyState == 4) {

                    var response = req.responseText.parseJSON();
                    //get element rank box.
                    var newPlayersTable = document.getElementById("rank_box");

                    // erase existing clues from rank_box
                    while (newPlayersTable.hasChildNodes()) {
                        newPlayersTable.removeChild(newPlayersTable.firstChild);
                    }

                    existingplayers=response.length;
                    //dynamically add elements onto rank box.
                    for (var i = 0; i < existingplayers; i++) {
                        //add table.
                        var newBlockTable = document.createElement("table");
                        newBlockTable.setAttribute("id", response[i]["friendName"]+"player");
                        newBlockTable.setAttribute("boarder", "0");
                        newBlockTable.setAttribute("cellpadding", "0");
                        newBlockTable.setAttribute("cellspacing", "0");
                        newBlockTable.setAttribute("width", "293");

                        var newBlockRow = document.createElement("tr");

                        var newBlocktd = document.createElement("td");

                        //add element for friend frame
                        var newBlockFrame = document.createElement("div");
                        newBlockFrame.setAttribute("id", "friend_frame");
                        newBlockFrame.innerHTML = "<img src=\"GUI/images/account/player_bg.png\" width=\"470\" height=\"40\" />";

                        //add element for player pic.
                        var newBlockPic = document.createElement("div");
                        newBlockPic.setAttribute("id", "friend_pic");
                        newBlockPic.innerHTML =  "<img src=\"GUI/images/account/player_"+response[i]["friendPicture"]+"_small.png\" width=\"23\" height=\"23\" />";

                        //add element for player online pic
                        var newBlockOnline = document.createElement("div");
                        newBlockOnline.setAttribute("id", "friend_online");
                        newBlockOnline.setAttribute("style", "display:block");
                        newBlockOnline.innerHTML =  "<img src=\"GUI/images/account/player_pix_online.png\" width=\"23\" height=\"23\" />";

                        //add element for player name.
                        var newBlockName = document.createElement("div");
                        newBlockName.setAttribute("class", "acct_window_player_name");
                        newBlockName.setAttribute("id", "player_name");
                        newBlockName.innerHTML = response[i]["friendName"];

                        //all dots elements old graphical dot for UI
                        var newDot2 = document.createElement("div");
                        newDot2.setAttribute("id", "player_dot_2");
                        newDot2.innerHTML = "<img src=\"GUI/images/account/dot.png\"/>";

                        //make element for score.
                        var newBlockScore = document.createElement("div");
                        newBlockScore.setAttribute("class", "acct_window_player_data");
                        newBlockScore.setAttribute("id", "friend_points");
                        newBlockScore.innerHTML = "Score: " + response[i]["friendScore"];

                        //all dots elements old graphical dot for UI
                        var newDot3 = document.createElement("div");
                        newDot3.setAttribute("id", "player_dot_3");
                        newDot3.innerHTML = "<img src=\"GUI/images/account/dot.png\"/>";

                        //make element for level.
                        var newBlockLevel = document.createElement("div");
                        newBlockLevel.setAttribute("class", "acct_window_player_data");
                        newBlockLevel.setAttribute("id", "friend_level");
                        newBlockLevel.innerHTML = "Level: " + response[i]["friendLevel"];

                        //make element for add button.
                        var newBlockAddBt = document.createElement("div");
                        newBlockAddBt.setAttribute("id", "btn_add");
                        newBlockAddBt.innerHTML = "<a href=\"#\" onclick=addFriend(\"" + response[i]["friendName"] + "\") onmouseout=\"MM_swapImgRestore()\" onmouseover=\"MM_swapImage('btn_remove','','GUI/images/account/btn_add_over.png',1)\"><img src=\"GUI/images/account/btn_add.png\" name=\"btn_remove\" width=\"15\" height=\"15\" border=\"0\" id=\"btn_add2\" /></a>";

                        //if player is online, display green sqauare.
                        newBlockFrame.appendChild(newBlockPic);
                        if(response[i]["friendOnline"]== "1"){
                            newBlockFrame.appendChild(newBlockOnline);
                        }
                        //append everything
                        newBlockFrame.appendChild(newBlockName);
                        newBlockFrame.appendChild(newDot2);
                        newBlockFrame.appendChild(newBlockScore);
                        newBlockFrame.appendChild(newDot3);
                        newBlockFrame.appendChild(newBlockLevel);
                        newBlockFrame.appendChild(newBlockAddBt);
                        newBlocktd.appendChild(newBlockFrame);
                        newBlockRow.appendChild(newBlocktd);
                        newBlockTable.appendChild(newBlockRow);
                        newPlayersTable.appendChild(newBlockTable);

                    }

                }

            }

            //update users profile infomation. User name can not be update, used as primal key.
            function updateUser() {
                //this method updates the changes the user entered in 'My Profile' tab to the DB

                var newEmail = document.form_reg_email.reg_email.value;
                var newPassword = document.form_reg_password.reg_password.value;
                var newConfirmPassword = document.form_reg_password_confirm.reg_password_confirm.value;

                //First make sure Password and Confirm Password have exactly the same values
                if (newPassword == newConfirmPassword){
                    document.getElementById("alert_txt").style.visibility = 'hidden';
                    //proceed to update DB
                    var url = "PlayerUpdateServlet?userName=" + userName + "&newEmail=" + newEmail + "&newPassword=" + newPassword;
                    if (typeof XMLHttpRequest != "undefined") {
                        req = new XMLHttpRequest();
                    } else if (window.ActiveXObject) {
                        req = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    req.open("GET", url, true);
                    req.onreadystatechange = playerinfoupdaterequestcallback;
                    req.send(null);
                } else {
                    //show error message that the passwords do not match
                    document.getElementById("alert_txt").style.visibility = 'visible';
                    document.getElementById("alert_txt").style.color = 'red';
                    document.getElementById("alert_txt").innerHTML = "Passwords do not match, please check again.";

                }
            }
            function playerinfoupdaterequestcallback(){
                if (req.readyState == 4) {
                    if (req.responseText=="1"){ //if the databases has succesfully update, 1 is returned,else, -1
                        document.getElementById("alert_txt").style.visibility = 'visible';
                        document.getElementById("alert_txt").innerHTML = "Successfully updated your info.";
                    } else {
                        document.getElementById("alert_txt").style.visibility = 'visible';
                        document.getElementById("alert_txt").innerHTML = "Failed to update your info.";
                    }

                }
            }
        </script>
    </head>
    <body onload="MM_preloadImages('GUI/images/account/account_over_r1_c2.png','GUI/images/account/btn_friends_over.png','GUI/images/account/btn_profile_over.png','GUI/images/account/btn_rank_over.png','GUI/images/account/btn_update_over.png','GUI/images/account/btn_search_over.png','GUI/images/account/btn_remove_over.png','GUI/images/account/btn_search_over2.png','GUI/images/account/btn_add_over.png','GUI/images/account/btn_cancel_over.png','GUI/images/account/btn_pix_over.png','GUI/images/account/player_0_over.png','GUI/images/account/player_1_over.png','GUI/images/account/player_2_over.png','GUI/images/account/player_3_over.png','GUI/images/account/player_4_over.png','GUI/images/account/player_5_over.png','GUI/images/account/player_6_over.png','GUI/images/account/player_7_over.png','GUI/images/account/player_8_over.png','GUI/images/account/player_9_over.png','GUI/images/account/player_10_over.png','GUI/images/account/player_11_over.png')">

        <!-- Left Side Panel Start -->
        <div id="acct_player_image"><img src="GUI/images/account/player_0.png"/></div>
        <div id="acct_player_level"><img src="GUI/images/account/level_1.png"/></div>
        <div id="acct_player_name" class="acct_window_player_name">Player Acount Name</div>
        <div id="acct_window_dot_1"><img src="GUI/images/account/dot.png"/></div>
        <div id="acct_player_level_num" class="acct_window_player_data">Level: 1</div>
        <div id="acct_window_dot_2"><img src="GUI/images/account/dot.png"/></div>
        <div id="acct_player_points" class="acct_window_player_data">Points: 430</div>
        <div id="acct_window_dot_3"><img src="GUI/images/account/dot.png"/></div>
        <div id="acct_player_rank" class="acct_window_player_data">Rank: N/A</div>
        <!-- Left Side Panel Ends -->

        <!-- Top Menu Panel Start -->
        <div id="acct_player_friends"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_friends','','GUI/images/account/btn_friends_over.png',1);this.style.cursor='pointer';" onclick="displayFriends()"><img src="GUI/images/account/btn_friends.png" name="btn_friends" width="82" height="21" border="0" id="btn_friends" /></a></div>
        <div id="acct_player_profile"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_profile','','GUI/images/account/btn_profile_over.png',1);this.style.cursor='pointer';" onclick="displayProfile()"><img src="GUI/images/account/btn_profile.png" name="btn_profile" width="74" height="19" border="0" id="btn_profile" /></a></div>
        <div id="acct_rank"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_rank','','GUI/images/account/btn_rank_over.png',1);this.style.cursor='pointer';" onclick="displayRank()"><img src="GUI/images/account/btn_rank.png" name="btn_rank" width="85" height="22" border="0" id="btn_rank" /></a></div>
        <!-- Top Menu Panel Ends -->

        <!-- Profile Panel Start -->
        <div id="profile_panel" style="display:block">
            <div id="label_reg_email" class="profile_page_label">Email:</div>
            <div id="label_reg_password" class="profile_page_label">Password:</div>
            <div id="label_reg_password_confirm" class="profile_page_label">Confirm Password:</div>

            <div id="txt_reg_email_left"><img src="GUI/images/account/acct_txt_left.png" width="10" height="26" /></div>

            <div id="txt_reg_email">
                <form id="form_reg_email" name="form_reg_email" method="post" action="">
                    <input type="text" name="reg_email" id="reg_email"/>
                </form>
            </div>

            <div id="txt_reg_email_right"><img src="GUI/images/account/acct_txt_right.png" width="10" height="26" /></div>

            <div id="txt_reg_password_right"><img src="GUI/images/account/acct_txt_right.png" width="10" height="26" /></div>

            <div id="txt_reg_password">
                <form id="form_reg_password" name="form_reg_password" method="post" action="">
                    <input type="text" name="reg_password" id="reg_password"/>
                </form>
            </div>

            <div id="txt_reg_password_left"><img src="GUI/images/account/acct_txt_left.png" width="10" height="26" /></div>

            <div id="txt_reg_password_confirm_left"><img src="GUI/images/account/acct_txt_left.png" width="10" height="26" /></div>

            <div id="txt_reg_password_confirm">
                <form id="form_reg_password_confirm" name="form_reg_password_confirm" method="post" action="">
                    <input type="text" name="reg_password_confirm" id="reg_password_confirm"/>
                </form>
            </div>

            <div id="txt_reg_password_confirm_right"><img src="GUI/images/account/acct_txt_right.png" width="10" height="26" /></div>

            <div id="alert_txt" style="visibility:hidden"></div>
            <div id="profile_panel_acct_name" class="body_bold">Player Name: Player One </div>
            <div id="btn_pix"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_pix','','GUI/images/account/btn_pix_over.png',1);this.style.cursor='pointer';" onclick="showPicturePanel()"><img src="GUI/images/account/btn_pix.png" name="btn_pix" width="120" height="27" border="0" id="btn_pix2" /></a></div>
            <div id="btn_update" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_update','','GUI/images/account/btn_update_over.png',1);this.style.cursor='pointer';" onclick="updateUser()"><img src="GUI/images/account/btn_update.png" name="btn_update" width="83" height="27" border="0" id="btn_update2" /></div>
        </div>
        <!-- Profile Panel Ends -->

        <!-- Friends Panel Start -->
        <div id="friends_panel" style="display:none">
            <div id="search_box_left"><img src="GUI/images/account/search_r1_c1.png" width="14" height="26" /></div>
            <div id="txt_search">
                <form id="form_firends_search" name="form_firends_search" method="post" action="">
                    <input type="text" name="firends_search" id="firends_search" value="Search"/>
                </form>
            </div>

            <div id="btn_search"><a href="#" onclick="searchFriendsHelper();" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_friends_search','','GUI/images/account/search_over_r1_c3.png',1)"><img src="GUI/images/account/search_r1_c3.png" name="btn_friends_search" width="28" height="26" border="0" id="btn_friends_search2" /></a></a>

            </div>
            <div class="friends_box" id="friends_box">

            </div>
        </div>
        <!-- Friends Panel Ends -->

        <!-- Players Panel Star -->
        <div id="rank_panel" style="display:none">
            <div id="search_box_left"><img src="GUI/images/account/search_r1_c1.png" width="14" height="26" /></div>
            <div id="txt_search">
                <form id="form_players_search" name="form_players_search" method="post" action="">
                    <input type="text" name="players_search" id="players_search" value="Search"/>
                </form>
            </div>
            <div id="btn_search"><a href="#" onclick="searchPlayersHelper();" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_players_search','','GUI/images/account/search_over_r1_c3.png',1)"><img src="GUI/images/account/search_r1_c3.png" name="btn_players_search" width="28" height="26" border="0" id="btn_players_search" /></a></a>
            </div>
            <div class="rank_box" id="rank_box">

            </div>
        </div>
        <!-- Players Panel Ends -->

        <!-- Account Picture Panel Start -->
        <div id="acct_pix_panel" style="display:none">
            <div id="acct_pix_bg"><img src="GUI/images/account/acct_pix_bg.png" /></div>
            <div id="btn_pix_0"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_pix_0','','GUI/images/account/player_0_over.png',1);this.style.cursor='pointer';" onclick="updatePicture(0)"><img src="GUI/images/account/player_0.png" name="btn_pix_0" width="58" height="58" border="0" id="btn_pix_12" /></a></div>
            <div id="btn_pix_1"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_pix_1','','GUI/images/account/player_1_over.png',1);this.style.cursor='pointer';" onclick="updatePicture(1)"><img src="GUI/images/account/player_1.png" name="btn_pix_1" width="58" height="58" border="0" id="btn_pix_13" /></a></div>
            <div id="btn_pix_2"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_pix_2','','GUI/images/account/player_2_over.png',1);this.style.cursor='pointer';" onclick="updatePicture(2)"><img src="GUI/images/account/player_2.png" name="btn_pix_2" width="58" height="58" border="0" id="btn_pix_14" /></a></div>
            <div id="btn_pix_3"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_pix_3','','GUI/images/account/player_3_over.png',1);this.style.cursor='pointer';" onclick="updatePicture(3)"><img src="GUI/images/account/player_3.png" name="btn_pix_3" width="58" height="58" border="0" id="btn_pix_15" /></a></div>
            <div id="btn_pix_4"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_pix_4','','GUI/images/account/player_4_over.png',1);this.style.cursor='pointer';" onclick="updatePicture(4)"><img src="GUI/images/account/player_4.png" name="btn_pix_4" width="58" height="58" border="0" id="btn_pix_16" /></a></div>
            <div id="btn_pix_5"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_pix_5','','GUI/images/account/player_5_over.png',1);this.style.cursor='pointer';" onclick="updatePicture(5)"><img src="GUI/images/account/player_5.png" name="btn_pix_5" width="58" height="58" border="0" id="btn_pix_17" /></a></div>
            <div id="btn_pix_6"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_pix_6','','GUI/images/account/player_6_over.png',1);this.style.cursor='pointer';" onclick="updatePicture(6)"><img src="GUI/images/account/player_6.png" name="btn_pix_6" width="58" height="58" border="0" id="btn_pix_18" /></a></div>
            <div id="btn_pix_7"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_pix_7','','GUI/images/account/player_7_over.png',1);this.style.cursor='pointer';" onclick="updatePicture(7)"><img src="GUI/images/account/player_7.png" name="btn_pix_7" width="58" height="58" border="0" id="btn_pix_19" /></a></div>
            <div id="btn_pix_8"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_pix_8','','GUI/images/account/player_8_over.png',1);this.style.cursor='pointer';" onclick="updatePicture(8)"><img src="GUI/images/account/player_8.png" name="btn_pix_8" width="58" height="58" border="0" id="btn_pix_20" /></a></div>
            <div id="btn_pix_9"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_pix_9','','GUI/images/account/player_9_over.png',1);this.style.cursor='pointer';" onclick="updatePicture(9)"><img src="GUI/images/account/player_9.png" name="btn_pix_9" width="58" height="58" border="0" id="btn_pix_21" /></a></div>
            <div id="btn_pix_10"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_pix_10','','GUI/images/account/player_10_over.png',1);this.style.cursor='pointer';" onclick="updatePicture(10)"><img src="GUI/images/account/player_10.png" name="btn_pix_10" width="58" height="58" border="0" id="btn_pix_22" /></a></div>
            <div id="btn_pix_11"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_pix_11','','GUI/images/account/player_11_over.png',1);this.style.cursor='pointer';" onclick="updatePicture(11)"><img src="GUI/images/account/player_11.png" name="btn_pix_11" width="58" height="58" border="0" id="btn_pix_23" /></a></div>
            <div id="btn_cancel"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_cancel','','GUI/images/account/btn_cancel_over.png',1);this.style.cursor='pointer';" onclick="hidePicturePanel()"><img src="GUI/images/account/btn_cancel.png" name="btn_cancel" width="64" height="23" border="0" id="btn_cancel2" /></a></div>
        </div>
        <!-- Account Picture Panel Ends -->

        <table border="0" cellpadding="0" cellspacing="0" width="700">
            <tr>
                <td><img src="GUI/images/account/spacer.gif" width="665" height="1" border="0" alt="" /></td>
                <td><img src="GUI/images/account/spacer.gif" width="34" height="1" border="0" alt="" /></td>
                <td><img src="GUI/images/account/spacer.gif" width="1" height="1" border="0" alt="" /></td>
                <td><img src="GUI/images/account/spacer.gif" width="1" height="1" border="0" alt="" /></td>
            </tr>

            <tr>
                <td><img name="account_r1_c1" src="GUI/images/account/account_r1_c1.png" width="665" height="35" border="0" id="account_r1_c1" alt="" /></td>
                <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('account _close','','GUI/images/account/account_over_r1_c2.png',1);this.style.cursor='pointer';" onclick="hideAcct()"><img src="GUI/images/account/account_r1_c2.png" name="account _close" width="34" height="35" border="0" id="account _close" /></a></td>
                <td rowspan="2"><img name="account_r1_c3" src="GUI/images/account/account_r1_c3.png" width="1" height="500" border="0" id="account_r1_c3" alt="" /></td>
                <td><img src="GUI/images/account/spacer.gif" width="1" height="35" border="0" alt="" /></td>
            </tr>
            <tr>
                <td colspan="2"><img name="account_r2_c1" src="GUI/images/account/account_r2_c1.png" width="699" height="465" border="0" id="account_r2_c1" alt="" /></td>
                <td><img src="GUI/images/account/spacer.gif" width="1" height="465" border="0" alt="" /></td>
            </tr>
        </table>
        <div id="btn_bg" style="display:block"><img src="GUI/images/account/btn_bg_li.png" /></div>
        <div id="profile_bg" style="display:block"><img src="GUI/images/account/btn_bg.png" /></div>
        <div id="friends_bg" style="display:none"><img src="GUI/images/account/btn_bg.png" /></div>
        <div id="rank_bg" style="display:none"><img src="GUI/images/account/btn_bg.png" /></div>
    </body>
</html>